<template>
  <div class="wrap">
    <div class="inner">
      <Top></Top>
      <div class="body">
        <div class="left">
          <Chart2></Chart2>
          <Chart1></Chart1>
          <Chart3></Chart3>
        </div>
        <div class="center">
          <div class="c1">
            <M1></M1>
            <M2></M2>
          </div>
          <div class="c2">
            <div class="c21">
              <M3></M3>
            </div>
            <div class="c22">
              <M4></M4>
            </div>
          </div>
          <div class="c3">
            <M5></M5>
          </div>
        </div>
        <div class="right">
          <Chart2></Chart2>
          <Chart1></Chart1>
          <M6></M6>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/views/home/BoardPage/FinanceBoard/Top'
import Chart2 from '@/views/home/BoardPage/FinanceBoard/Chart2'
import Chart1 from '@/views/home/BoardPage/FinanceBoard/Chart1'
import Chart3 from '@/views/home/BoardPage/FinanceBoard/Chart3'
import M1 from '@/views/home/BoardPage/FinanceBoard/M1'
import M2 from '@/views/home/BoardPage/FinanceBoard/M2'
import M3 from '@/views/home/BoardPage/FinanceBoard/M3'
import M4 from '@/views/home/BoardPage/FinanceBoard/M4'
import M5 from '@/views/home/BoardPage/FinanceBoard/M5'
import M6 from '@/views/home/BoardPage/FinanceBoard/M6'

export default {
  components: {
    Top,
    Chart2,
    Chart1,
    Chart3,
    M1,
    M2,
    M3,
    M4,
    M5,
    M6
  },
  data() {
    return {
      currentNav: '',
    }
  }
}
</script>

<style scoped lang='less'>
.wrap {
  overflow: auto;
  font-size: 12px;
  .inner {
    min-width: 1832px; // 1920 - 88
    height: 1080px;
    background-color: #000052;
  }
}

.body {
  height: calc(100% - 83px);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  .left {
    background-image: url(../../../../assets/chartBg/FinanceBoard5.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
  }

  .center {
    width: 800px;
    .c1 {
    }

    .c2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .c21 {
      }

      .c22 {
      }
    }
    .c3 {
      margin-top: 20px;
    }
  }

  .right {
    background-image: url(../../../../assets/chartBg/FinanceBoard5.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
  }
}
</style>
